import { Form, Col } from 'antd';
import { componentMap } from './compMap';
import { ISchemaInfo } from './interface';
import { useMemo } from 'react';

export default function FormItem(props: ISchemaInfo) {
  const { colProps, component, componentProps, ...rest } = props;
  const renderElement = () => {
    const Element = component ? componentMap.get(component) : () => <></>;
    return <Element {...componentProps} />;
  };

  const valuePropName = useMemo(() => {
    if (!component) return 'value';
    return ['Switch', 'Checkbox', 'Radio'].includes(component) ? 'checked' : 'value';
  }, [component]);

  return (
    <Col {...colProps}>
      <Form.Item {...rest} valuePropName={valuePropName}>
        {renderElement()}
      </Form.Item>
    </Col>
  );
}
